<template>
  <div class="mian">
    <ul class="card_list">
      <!-- template -->
      <el-row :gutter="10" type="flex" justify="start">
        <template v-for="(item, index) of allpatientinfo">
          <el-col
            :span="coldata"
            :key="index"
            v-if="item.userId && item.theHospitalStatus == 0"
            class="card_item_col"
          >
            <li class="card_item" @click="checkdetails(item.userId)">
              <ul class="card_item_main">
                <li class="item_main item_main_top">
                  <img
                    src="../../assets/img/tested.png"
                    alt=""
                    class="tested"
                    v-if="item.dutStatus == 1"
                  />
                  <span class="bedNumber">{{ item.bedNum }}床</span>
                  <br />
                  <span class="userInformation">{{ item.userName }}</span>
                  <span class="userInformation">{{
                    item.sex == 0 ? "女" : "男"
                  }}</span>
                  <span class="userInformation">{{ item.age }}岁</span>
                </li>
                <li class="item_main item_main_bottom">
                  <span class="days_zy">{{ item.inHospitalDayNum }}</span>
                  <br />
                  <span class="number_zy">{{ item.hospitalNum }}</span>
                  <div class="container_btn">
                    <span class="btn_text">{{ item.departmentName }}</span>
                    <span class="btn_text">{{ item.doctorName }}</span>
                    <span class="btn_text">{{ item.sugarType }}</span>
                  </div>
                  <span class="time_zy">时间:{{ item.gluceExamtime }}</span>
                  <br />
                  <span class="time_cl">{{ item.gluceValue }}</span>
                  <br />
                  <span class="measured">{{ item.sugarNum }}mmol/L</span>
                  <span class="icon_Collection" @click.stop="follow(item)">
                    <i
                      class="iconfont icon-shoucang1"
                      :class="item.concernUserId == 1 ? 'isactive' : ''"
                    ></i>
                    {{ item.concernUserId == 1 ? "取消" : "关注" }}
                  </span>
                </li>
              </ul>
            </li>
          </el-col>
          <el-col :span="coldata" :key="index" class="empty_card_col" v-else>
            <li class="empty_card_item">
              <span class="bedNumber"
                >{{ item.bedNum }}床
                <span class="department">{{ item.departmentName }}</span>
              </span>
              <img class="emptyBed" src="./image/emptyBed.png" />
              <el-button class="addbtn" type="text" @click="addPatient(item)"
                >添加</el-button
              >
            </li>
          </el-col>
        </template>
      </el-row>
    </ul>
    <!-- <v-pagination :total="total" @currentPage="currentPage"></v-pagination> -->
  </div>
</template>

<script>
import "@/assets/fontIcon/collection/font_1858713_phswlcejg1/iconfont.css";
// 引入分页
// import vPagination from "@/components/pagination/index";

import bus from "./bus.js"

export default {
  data() {
    return {
      option_ks: [
        {
          label: "骨科",
          value: "1",
        },
        {
          label: "妇产科",
          value: "2",
        },
      ],
      option_ys: [
        {
          label: "李医生",
          value: "1",
        },
        {
          label: "王医生",
          value: "2",
        },
      ],
      option_lx: [
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
      ],
      value1: "", //科室val
      value2: "", //医生val
      value3: "", //类型val
      // 选择查看类型
      queryType: [
        {
          label: "全部人数",
          val: "222",
        },
        {
          label: "异常数据",
          val: "222",
        },
        {
          label: "待测人数",
          val: "222",
        },
        {
          label: "关注患者",
          val: "222",
        },
      ],
      radio: "全部人数",
      radio2: "",
      value4: "",
      switchVal: true, //卡片列表切换按钮绑定数值
      coldata: 4,
    };
  },
  props: {
    // 所有床位信息
    allpatientinfo: {
      type: Array,
      required: true,
    },
    // 总页数
    // total: {
    //   type: Number,
    //   required: true,
    // },
  },
  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize);
  },
  methods: {
    switchTab() {
      console.log(this.switchVal);
    },
    // 多张卡片自适应屏幕适配
    onResize() {
      let bodyWidth = document.body.getBoundingClientRect().width;
      if (bodyWidth >= 1802) {
        this.coldata = 4;
      }
      if (bodyWidth <= 1802) {
        this.coldata = 6;
      }
      if (bodyWidth <= 1293) {
        this.coldata = 8;
      }
      if (bodyWidth <= 1078) {
        this.coldata = 12;
      }
      if (bodyWidth <= 783) {
        this.coldata = 24;
      }
    },
    // 当前页码
    currentPage(val) {
      // return
      // console.log(val)
      // this.$emit("highest", val);
      // bus.$emit("currentPage",val)
      // console.log(bus);
      // this.test(val)
    },
    // 查看患者详情
    checkdetails(id) {
      this.$router.push({ path: "/patientDetails", query: { id ,type:1} });
    },
    // 取消关注患者,点击关注患者
    follow(row) {
      let data = {
        doctorId: Number(row.doctorId),
        userId: Number(row.userId),
      };
      this.$api
        .attentionUser(data)
        .then((res) => {
          this.$message.success(res.message);
          this.$router.go(0);
        })
        .catch((err) => {});
    },
    // 添加患者
    addPatient(row) {
      // console.log(row)
      this.$router.push({
        path: "/addPatient",
        query: { bedID: row.bedId, departmentId: row.departmentId },
      });
    },
  },
  components: {
    // vPagination,
  },
};
</script>

<style lang="scss" scoped>
.mian {
  padding: 13px 0;
  .isactive {
    &::before {
      color: #ff0101;
    }
  }
  .card_list {
    width: 100%;
    padding: 0;
    .el-row {
      flex-flow: wrap;
      .card_item_col {
        height: 342px;
        .card_item {
          width: 100%;
          min-width: 260px;
          height: 322px;
          background-color: #fff;
          list-style-type: none;
          border-radius: 7px;
          margin-bottom: 20px;
          .card_item_main {
            padding: 0;
            .item_main {
              list-style-type: none;
              padding: 17px;
            }
            .item_main_top {
              height: 89px;
              position: relative;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: #333333;
              .tested {
                width: 60px;
                position: absolute;
                right: 0;
                top: 0;
              }
              .bedNumber {
                font-size: 22px;
                margin-right: 20px;
              }
              .userInformation {
                font-size: 15px;
                margin-right: 20px;
              }
              &:after {
                content: "";
                display: block;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 234px;
                border-bottom: 1px solid #eeeeee;
              }
            }
            .item_main_bottom {
              // background: red;
              .days_zy {
                &::before {
                  content: "住院天数:";
                  font-size: 18px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                }
              }
              .number_zy {
                &::before {
                  content: "住院号码:";
                  font-size: 18px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
                }
              }
              .time_zy {
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }
              .measured {
                font-size: 22px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #ff0101;
              }
              .container_btn {
                margin-bottom: 18px;
                .btn_text {
                  height: 24px;
                  background: #01a7f0;
                  border-radius: 10px;
                  color: #fff;
                  padding: 2px 10px;
                  font-size: 14px;
                }
              }
              .time_cl {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
              }
              .icon_Collection {
                margin-left: 0.2rem;
                // &::after {
                //   content: "关注";
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ff0101;
                margin-left: 6px;
                // }
                .icon-shoucang1 {
                  color: #999999;
                }
              }
            }
          }
        }
      }
      .empty_card_col {
        height: 342px;
        .empty_card_item {
          width: 100%;
          min-width: 260px;
          height: 322px;
          padding: 17px;
          background-color: #fff;
          list-style-type: none;
          border-radius: 7px;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: space-between;
          .bedNumber {
            align-self: flex-start;
            .department {
              font-size: 18px;
              padding-left: 20px;
            }
          }
          .emptyBed {
            width: 161px;
          }
          .addbtn {
            font-size: 18px;
            font-weight: 400;
            &::after {
              content: "病床";
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
            &::before {
              content: "点击";
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }
    }
  }
}
</style>